<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<title>CKEDITOR.dom.element</title>
	<link rel="stylesheet" type="text/css" href="../../test.css" />
	<script type="text/javascript" src="../../../ckeditor.js"></script>
	<script type="text/javascript" src="../../test.js"></script>
	<script type="text/javascript">
	//<![CDATA[

CKEDITOR.test.addTestCase( (function()
{
	// Local reference to the "assert" object.
	var assert = CKEDITOR.test.assert;
	var getInnerHtml = CKEDITOR.test.getInnerHtml;

	return {
		test_$ : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
			assert.areSame( document.getElementById( 'test1' ), element.$ );
		},

		test_getId1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
			assert.areEqual( 'test1', element.getId() );
		},

		test_getId2 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementsByTagName( 'div' )[0] );
			assert.isNull( element.getId() );
		},

		test_getNameAtt1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementsByName( 'named1' )[0] );
			assert.areEqual( 'named1', element.getNameAtt() );
		},

		test_getNameAtt2 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
			assert.isNull( element.getNameAtt() );
		},

		test_getName : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
			assert.areEqual( 'textarea', element.getName(), 'First call' );
			assert.areEqual( 'textarea', element.getName(), 'Second call' );
		},

		test_hide : function()
		{
			var nativeElement = document.getElementById( 'test1' );
			nativeElement.style.display = '';

			var element = new CKEDITOR.dom.element( nativeElement );
			element.hide();

			assert.areEqual( 'none', nativeElement.style.display );
		},

		test_show : function()
		{
			var nativeElement = document.getElementById( 'test1' );
			nativeElement.style.display = '';

			var element = new CKEDITOR.dom.element( nativeElement );
			element.show();

			assert.areEqual( '', nativeElement.style.display );
		},

		test_createFromHtml : function()
		{
			var element = CKEDITOR.dom.element.createFromHtml( '<p>My test</p>' );
			assert.areEqual( 'p', element.getName(), 'element name doesn\'t match' );
			assert.areEqual( 'My test', element.$.innerHTML, 'the innerHTML doesn\'t match' );
		},

		test_createFromHtml2 : function()
		{
			var element = new CKEDITOR.dom.element.createFromHtml( '<div><x:x><p>Test</p></div>' );
			assert.areNotEqual( 'Test', element.getChild( 0, 0 ).innerHTML );
		},

		test_append1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
			element.append( new CKEDITOR.dom.element( 'b' ) );
			assert.areEqual( 'b', document.getElementById( 'append' ).firstChild.nodeName.toLowerCase() );
		},

		test_append2 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
			element.append( 'i' );
			assert.areEqual( 'i', document.getElementById( 'append' ).lastChild.nodeName.toLowerCase() );
		},

		test_appendText1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
			element.setHtml( '' );
			element.appendText( 'Test appendText' );
			assert.areEqual( 'Test appendText', document.getElementById( 'append' ).innerHTML );
		},

		test_appendText2 : function()
		{
			var element = new CKEDITOR.dom.element( 'script' );
			element.appendText( 'Test appendText' );
			assert.areEqual( 'Test appendText', element.$.text );
		},

		test_setHtml : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
			element.setHtml( '<b>Test</b>' );
			assert.areEqual( '<b>test</b>', document.getElementById( 'append' ).innerHTML.toLowerCase(), 'First call doesn\'t match' );
			element.setHtml( 'Another test' );
			assert.areEqual( 'Another test', document.getElementById( 'append' ).innerHTML, 'Second call doesn\'t match' );
		},

		test_getDocument1 : function()
		{
			var element = new CKEDITOR.dom.element( 'div' );
			assert.areSame( document, element.getDocument().$, 'First call' );
			assert.areSame( document, element.getDocument().$, 'Second call' );
		},

		test_getDocument2 : function()
		{
			var element = new CKEDITOR.dom.element( document.body );
			assert.areSame( document, element.getDocument().$, 'First call' );
			assert.areSame( document, element.getDocument().$, 'Second call' );
		},

		test_getFirst1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
			element.setHtml( '<b>Test</b>' );
			var first = element.getFirst();
			assert.areSame( 'b', first.getName() );
		},

		test_getFirst2 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
			element.setHtml( 'Test' );
			var first = element.getFirst();
			assert.areSame( 'Test', first.$.nodeValue );
		},

		test_getFirst3 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
			element.setHtml( '' );
			var first = element.getFirst();
			assert.isNull( first );
		},

		test_setAttribute1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
			element.setAttribute( 'class', 'Test' );

			assert.areSame( 'Test', document.getElementById( 'test1' ).className );
		},

		test_setAttribute2 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
			element.setAttribute( 'style', 'position: absolute;' );

			assert.areEqual( 'position: absolute;', CKEDITOR.test.getAttribute( element, 'style' ) );
		},

		test_setAttribute3 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
			element.setAttribute( 'name', 'TestName' );

			assert.areEqual( 'TestName', document.getElementById( 'test1' ).name );
		},

		test_setAttribute4 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
			element.setAttribute( 'rows', 5 );

			assert.areEqual( 5, document.getElementById( 'test1' ).rows );
		},

		test_setAttributes : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'test2' ) );
			element.setAttributes({
				'class'	: 'Test',
				'style'	: 'position: absolute;',
				'name'	: 'TestName',
				'rows'	: 5 });

			assert.areSame( 'Test', document.getElementById( 'test1' ).className, 'class is wrong' );
			assert.areEqual( 'position: absolute;', CKEDITOR.test.getAttribute( element, 'style'), 'style is wrong' );
			assert.areEqual( 'TestName', document.getElementById( 'test1' ).name, 'name is wrong' );
			assert.areEqual( 5, document.getElementById( 'test1' ).rows, 'rows is wrong' );
		},

		test_setStyle1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'setStyle' ) );
			element.setStyle( 'position', 'absolute' );

			assert.areEqual( 'absolute', document.getElementById( 'setStyle' ).style.position );
		},

		test_setStyle2 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'setStyle' ) );
			element.setStyle( 'float', 'right' );

			assert.areEqual( 'right', document.getElementById( 'setStyle' ).style.cssFloat );
		},

		test_setStyles : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'setStyle' ) );
			element.setStyles({
					'position' : 'absolute',
					'float' : 'right'
				});

			assert.areEqual( 'absolute', document.getElementById( 'setStyle' ).style.position );
			assert.areEqual( 'right', document.getElementById( 'setStyle' ).style.cssFloat );
		},

		test_setText1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'setText' ) );
			element.setText( 'A & B' );
			assert.areSame( 'A &amp; B', document.getElementById( 'setText' ).innerHTML );
		},

		test_setText2 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'setText' ) );
			element.setText( 'C & D' );
			assert.areSame( 'C &amp; D', document.getElementById( 'setText' ).innerHTML );
		},

		test_addClass1 : function()
		{
			var element = new CKEDITOR.dom.element( 'div' );
			element.addClass( 'classA' );
			assert.areSame( 'classA', element.$.className );
		},

		test_addClass2 : function()
		{
			var element = new CKEDITOR.dom.element( 'div' );
			element.addClass( 'classA' );
			element.addClass( 'classA' );
			assert.areSame( 'classA', element.$.className );
		},

		test_addClass3 : function()
		{
			var element = new CKEDITOR.dom.element( 'div' );
			element.addClass( 'classA' );
			element.addClass( 'classB' );
			element.addClass( 'classC' );
			assert.areSame( 'classA classB classC', element.$.className );
		},

		test_addClass4 : function()
		{
			var element = new CKEDITOR.dom.element( 'div' );
			element.addClass( 'classA' );
			element.addClass( 'classB' );
			element.addClass( 'classC' );
			element.addClass( 'classA' );
			element.addClass( 'classB' );
			element.addClass( 'classC' );
			assert.areSame( 'classA classB classC', element.$.className );
		},

		test_removeClass1 : function()
		{
			document.getElementById( 'removeClass' ).innerHTML = '';

			var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA"></div>' );
			element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );

			assert.areSame( '<div class="classa"></div>', getInnerHtml( 'removeClass' ) );
			element.removeClass( 'classA' );
			assert.areSame( '<div></div>', getInnerHtml( 'removeClass' ) );
		},

		test_removeClass2 : function()
		{
			document.getElementById( 'removeClass' ).innerHTML = '';

			var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA classB classC classD"></div>' );
			element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );

			assert.areSame( '<div class="classa classb classc classd"></div>', getInnerHtml( 'removeClass' ) );
			element.removeClass( 'classA' );
			assert.areSame( '<div class="classb classc classd"></div>', getInnerHtml( 'removeClass' ) );
			element.removeClass( 'classC' );
			assert.areSame( '<div class="classb classd"></div>', getInnerHtml( 'removeClass' ) );
			element.removeClass( 'classD' );
			assert.areSame( '<div class="classb"></div>', getInnerHtml( 'removeClass' ) );
			element.removeClass( 'classB' );
			assert.areSame( '<div></div>', getInnerHtml( 'removeClass' ) );
		},

		test_removeClass3 : function()
		{
			document.getElementById( 'removeClass' ).innerHTML = '';

			var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA classB"></div>' );
			element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );

			assert.areSame( '<div class="classa classb"></div>', getInnerHtml( 'removeClass' ) );
			element.removeClass( 'classXXX' );
			assert.areSame( '<div class="classa classb"></div>', getInnerHtml( 'removeClass' ) );
			element.removeClass( 'classB' );
			assert.areSame( '<div class="classa"></div>', getInnerHtml( 'removeClass' ) );
			element.removeClass( 'classYYY' );
			assert.areSame( '<div class="classa"></div>', getInnerHtml( 'removeClass' ) );
		},

		test_removeAttribute1 : function()
		{
			document.getElementById( 'removeClass' ).innerHTML = '';

			var element = CKEDITOR.dom.element.createFromHtml( '<div class="classA"></div>' );
			element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );

			element.removeAttribute( 'class' );
			assert.areSame( '<div></div>', getInnerHtml( 'removeClass' ) );
		},

		test_removeAttribute2 : function()
		{
			document.getElementById( 'removeClass' ).innerHTML = '';

			var element = CKEDITOR.dom.element.createFromHtml( '<div style="position:absolute"></div>' );
			element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );

			element.removeAttribute( 'style' );
			assert.areSame( '<div></div>', getInnerHtml( 'removeClass' ) );
		},

		test_removeAttribute3 : function()
		{
			document.getElementById( 'removeClass' ).innerHTML = '';

			var element = CKEDITOR.dom.element.createFromHtml( '<div title="Test"></div>' );
			element.appendTo( new CKEDITOR.dom.element( document.getElementById( 'removeClass' ) ) );

			element.removeAttribute( 'title' );
			assert.areSame( '<div></div>', getInnerHtml( 'removeClass' ) );
		},

		test_remove : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'removeInner' ) );
			element.remove();

			assert.areSame( '', getInnerHtml( 'removeOuter' ) );
		},

		test_getAttribute_tabindex1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndex10' ) );
			assert.areEqual( 10, CKEDITOR.test.getAttribute( element, 'tabindex' ) );
		},

		test_getAttribute_tabindex2 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexDef' ) );
			assert.isNull( CKEDITOR.test.getAttribute( element, 'tabindex' ) );
		},

		test_getAttribute_tabindex3 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexInputDef' ) );
			assert.isNull( CKEDITOR.test.getAttribute( element, 'tabindex' ) );
		},

		test_getAttribute_tabindex4 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexInput20' ) );
			assert.areEqual( 20, CKEDITOR.test.getAttribute( element, 'tabindex' ) );
		},

		test_getAttribute_tabindex5 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexScriptDef' ) );
			assert.areEqual( null, CKEDITOR.test.getAttribute( element, 'tabindex' ) );
		},

		/**
		 *  Test getAttribute and getAttribute will ingore  '_cke_expando' attribute.
		 */
		test_getAttribute_ignoreExpandoAttributes : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'testExpandoAttributes' ) );

			assert.areEqual( 1, CKEDITOR.test.getAttribute( element, 'tabindex' ), 'tabindex is wrong' );
			element.removeAttribute( 'tabindex' );

			assert.areEqual( 'hasExpando', CKEDITOR.test.getAttribute( element, 'class' ), 'class is wrong' );
			element.removeAttribute( 'class' );

			assert.areEqual( 'float: right;', CKEDITOR.test.getAttribute( element, 'style' ) );

			element.removeAttribute( 'style' );
			element.removeAttribute( 'id' );
			assert.isFalse( element.hasAttributes(), 'hasAttributes should be false' );
		},

		test_getTabIndex1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndex10' ) );
			assert.areSame( 10, element.getTabIndex() );
		},

		test_getTabIndex2 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexDef' ) );
			assert.areSame( -1, element.getTabIndex() );
		},

		test_getTabIndex3 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexInputDef' ) );
			assert.areSame( 0, element.getTabIndex() );
		},

		test_getTabIndex4 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexInput20' ) );
			assert.areSame( 20, element.getTabIndex() );
		},

		test_getTabIndex5 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'tabIndexScriptDef' ) );
			assert.areSame( -1, element.getTabIndex() );
		},

		test_private1 : function()
		{
			var a = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
			var b = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );

			assert.areSame( a.getPrivate(), b.getPrivate() );
		},

		test_private2 : function()
		{
			var a = new CKEDITOR.dom.element( document.getElementById( 'test1' ) );
			var b = new CKEDITOR.dom.element( document.getElementById( 'test2' ) );

			assert.areNotSame( a.getPrivate(), b.getPrivate() );
		},

		test_getText1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'getText' ) );

			// IE gives us a different result, which is ok for us (see code comments).
			if ( CKEDITOR.env.ie )
				assert.areSame( 'Some \nsample text for testing', element.getText().replace( /\r\n|\r/g, '\n' ) );
			else
				assert.areSame( 'Some  sample text    for    testing', element.getText() );
		},

		test_getText2 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'getText2' ).getElementsByTagName( 'b' )[0] );
			assert.areSame( ' ', element.getText() );
		},

		test_getText3 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'getText3' ) );

			// IE gives us a different result, which is ok for us (see code comments).
			if ( CKEDITOR.env.ie )
				assert.areSame( 'A B', element.getText() );
			else
				assert.areSame( 'A\nB', element.getText().replace( /\r\n|\r/g, '\n' ) );
		},

		test_hasAttributes1 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementsByTagName( 'big' )[0] );
			assert.isFalse( element.hasAttributes() );
		},

		test_hasAttributes2 : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementsByTagName( 'small' )[0] );
			assert.isTrue( element.hasAttributes() );
		},

		/**
		 * Test detecting of 'class' attribute in IE6/7.
		 */
		test_hasAttributes_4075 : function()
		{
			if ( !CKEDITOR.env.ie && ( CKEDITOR.env.ie7Compat || CKEDITOR.env.ie6Compat ) )
				return;
			var element = new CKEDITOR.dom.element( 'span' );
			element.setAttribute( 'class', 'value' );
			assert.isTrue( element.hasAttributes(), 'Failed to detect "class" attribute existence.' );
		},

		test_getDocumentPosition : function()
		{
			// Assign the page location of the element.
			YAHOO.util.Dom.setXY('DocPositionTarget', [ 350, 450 ] );
			var pos = CKEDITOR.document.getById( 'DocPositionTarget' ).getDocumentPosition();
			if ( !CKEDITOR.env.ie || CKEDITOR.env.ie8 )
			{
				assert.areEqual( 350, pos.x, 'Position coordinates:x relative to document doesn\'t match.' );
				assert.areEqual( 450, pos.y, 'Position coordinates:y relative to document doesn\'t match.' );
			}
			else
			{
				assert.isTrue( pos.x == 348 || pos.x == 349, 'Position coordinates:x relative to document doesn\'t match.' );
				assert.areEqual( 448, pos.y, 'Position coordinates:y relative to document doesn\'t match.' );
			}
		},

		// Test get last non-spaces child node.
		test_getLast : function()
		{
			var element = new CKEDITOR.dom.element( document.getElementById( 'append' ) );
			var span1 = new CKEDITOR.dom.element( 'span' );
			element.append( span1 );
			element.append( new CKEDITOR.dom.text( ' ' ) );
			element.append( new CKEDITOR.dom.text( ' ' ) );
			var last = element.getLast( CKEDITOR.dom.walker.whitespaces( true ) );
			assert.areSame( span1.$, last.$ );
		},


		name : document.title
	};
})() );

	//]]>
	</script>
	<style type="text/css" media="screen">
		#test-computed {
		    width:50%;
		    margin:auto;
		    padding:10px;
		    z-index: 2;
		}
		.scroll
		{
			overflow: visible;
		}
		.block1
		{
			width: 100%;
			height: 100px;
			background-color: blue;
			text-align: center;
		}
		.block2
		{
			margin: auto;
			width: 200px;
			height: 200px;
			background-color: green;
			position : relative;
		}
		.block3
		{
			position: absolute;
			float:right;
			width: 300px;
			height: 300px;
			background-color: black;
		}
		.block4
		{
			position: absolute;
			left: 50px;
			right: 50px;
			width: 400px;
			height: 400px;
			background-color: pink;
		}
		#DocPositionTarget
		{
			background-color: red;
		}
	</style>
</head>
<body>
	<textarea id="test1" rows="10" cols="80"></textarea>
	<textarea id="test2" rows="10" cols="80"></textarea>
	<textarea name="named1" rows="10" cols="80"></textarea>
	<div>Test</div>
	<div id="append"></div>
	<div id="setStyle"></div>
	<div id="setText"></div>
	<div id="removeClass"></div>
	<div id="removeOuter"><b id="removeInner"></b></div>
	<div id="tabIndex10" tabindex="10"></div>
	<div id="testExpandoAttributes" _cke_expando ="1" class="hasExpando" tabindex="1" style="float:right"></div>
	<div id="tabIndexDef"></div>
	<input id="tabIndexInputDef" />
	<input id="tabIndexInput20" tabindex="20" />
	<script id="tabIndexScriptDef" type="text/javascript"></script>
	<div id="getText">Some <br /><b> sample text</b>    for <i>   testing</i></div>
	<div id="getText2">A<b> </b>B</div>
	<div id="getText3">A
B</div>
	<big>Test</big>
	<small title="Testing">Test</small>

	<div class="block1 scroll" id="block1"><div class="block2 scroll" id="block2"><div class="block3 scroll" id="block3"><div class="block4 scroll" id="block4"><div id="DocPositionTarget">target</div></div></div></div></div>

</body>
</html>
